<template>
  <view class="container">
    <view class="title">视频通话</view>
    <view class="feature-list">
      <view class="feature" v-for="item in features" :key="item.name" @click="goTo(item.page)">
        <text>{{ item.name }}</text>
        <text class="desc">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const features = ref([
  { name: '视频', desc: '家长实时观看孩子', page: '' },
  { name: '清晰语音通话', desc: '高质量麦克风与扬声器', page: '' },
  { name: '快速连接与响应', desc: '快速建立视频通话', page: '' },
  { name: '摄像头控制', desc: '支持旋转、缩放、聚焦', page: '' }
])
function goTo(page) {
  uni.showToast({ title: '功能开发中', icon: 'none' })
}
</script>

<style scoped>
.container { padding: 40rpx; }
.title { font-size: 40rpx; font-weight: bold; margin-bottom: 40rpx; text-align: center; }
.feature-list { }
.feature {
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.desc { display: block; color: #888; font-size: 24rpx; margin-top: 8rpx; }
</style> 